/**
 * 训练倒计时覆盖层 Web Component
 * 用法: <training-countdown-overlay visible="true" countdown="3"></training-countdown-overlay>
 */
class TrainingCountdownOverlay extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    static get observedAttributes() {
        return ['visible', 'countdown'];
    }

    connectedCallback() {
        this.render();
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue !== newValue) {
            if (name === 'visible') {
                this.updateVisibility();
            } else if (name === 'countdown') {
                this.updateCountdown();
            }
        }
    }

    updateVisibility() {
        const visible = this.getAttribute('visible') === 'true';
        this.style.display = visible ? 'block' : 'none';
    }

    updateCountdown() {
        const countdown = this.getAttribute('countdown') || '3';
        const countdownNumber = this.shadowRoot.querySelector('.countdown-number');
        if (countdownNumber) {
            countdownNumber.textContent = countdown;
        }
    }

    render() {
        const visible = this.getAttribute('visible') === 'true';
        const countdown = this.getAttribute('countdown') || '3';

        this.shadowRoot.innerHTML = `
            <style>
                * {
                    box-sizing: border-box;
                }

                :host {
                    display: ${visible ? 'block' : 'none'};
                }

                .countdown-overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100vh;
                    height: 100dvh;
                    background-color: rgba(0, 0, 0, 0.7);
                    z-index: 99999;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }

                .countdown-circle {
                    width: clamp(100px, 28vw, 140px);
                    height: clamp(100px, 28vw, 140px);
                    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
                    animation: countdownPulse 1s infinite;
                    margin-bottom: 6vw;
                }

                .countdown-number {
                    font-size: clamp(40px, 12vw, 60px);
                    font-weight: bold;
                    color: #ffffff;
                    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
                }

                .countdown-text {
                    color: #ffffff;
                    font-size: clamp(16px, 4.5vw, 20px);
                    font-weight: bold;
                }

                @keyframes countdownPulse {
                    0%, 100% {
                        transform: scale(1);
                    }
                    50% {
                        transform: scale(1.1);
                    }
                }
            </style>

            <div class="countdown-overlay">
                <div class="countdown-circle">
                    <span class="countdown-number">${countdown}</span>
                </div>
                <span class="countdown-text">即将开始</span>
            </div>
        `;
    }
}

// 注册自定义元素
customElements.define('training-countdown-overlay', TrainingCountdownOverlay);
